<template>
    <div>
        <el-row>
            <el-col :span="2">流量周期：</el-col>
            <el-col :span="6">1111</el-col>
            <el-col :span="2">活跃卡数：</el-col>
            <el-col :span="6">22222</el-col>
            <el-col :span="2">套餐总流量：</el-col>
            <el-col :span="6">333333</el-col>
        </el-row>
        <el-row>
            <el-col :span="2">超额流量：</el-col>
            <el-col :span="6">44444444</el-col>
            <el-col :span="2">实际流量：</el-col>
            <el-col :span="6">55555555555</el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="iccid" label="ICCID" width="210">
        </el-table-column>
        <el-table-column prop="name" label="套餐名称" width="210">
        </el-table-column>
        <el-table-column prop="all_flow" label="总流量" width="210">
        </el-table-column>
         <el-table-column prop="chao_flow" label="超额流量" width="200">
        </el-table-column>
        <el-table-column prop="real_flow" label="实际流量">
        </el-table-column>
    </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        iccid: '8986031749204104383',
                        name: '移动移动单档位流量池',
                        all_flow: '0.0KB',
                        chao_flow: '0.0KB',
                        real_flow: '0.0KB'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-row {
        .el-col {
            font-size: 14px;
            padding: 15px 0px;
        }
        .el-col:nth-of-type(2n + 1) {
            font-weight: bold;
            text-align: left;
        }
        .el-col:nth-of-type(2n) {
            padding-left: 15px;
        }
    }
</style>